<html>
<head>
<#include "/freemarker/fw/meta_top.ftl">
    <title>Book XTime</title>
    <#include "/freemarker/fw/load_static.ftl">
    <script>
        var _deleteBook = function(el, id){
            console.log($(el).closest("li.book-item"));
            $(el).closest("li.book-item").remove()
        }
        $(function() {
            $( ".search-input" ).autocomplete({
                source: function(request, response){
                    $.get("/book/searchForAutoComplete", {
                        q: $(".search-input").val()
                    }, function(result){
                        response(result)
                    });
                }
            });
            $( ".search-input").on("keydown", function(e){
                if(e.keyCode == 13){
                    $.get("/book/search_html", {q: $(e.target).val()}, function(response){
                        console.log($(response));
                        $("#book_box").html($(response));
                    });
                }
            });
        });
    </script>
    <style>
        #book_search{
            display: table; width:100%;
        }
        .search-btn{
            float: right;
            font-size: 20px;
            margin: 5px 5px 5px -28px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<#include "/freemarker/fw/navbar_top.ftl">
<div class="container" id="main">
    <div class="row">
        <div class="col-sm-6">
            <div id="book_search">
                <i class="glyphicon glyphicon-search search-btn"></i>
                <input name="searchInput" class="search-input" placeholder="搜索" type="text" style="width:50%; float: right; padding-right: 31px">
            </div>
            <div id="book_box">
                <#include "/book/book_list.ftl">
            </div>
        </div>
        <#include "/book/book_preview.ftl">
    </div>
</div>
</body>
</html>